<template>
	<view class="setting-layout">
		<view class="setting-list">
			<view class="setting-item" v-for="item in menuList" :key="item.type" @tap="didSelectItem(item)">
				<text>{{item.title}}</text>
				<xh-icon icon="icon_jiantou"></xh-icon>
				<view class="line"></view>
			</view>
		</view>
		<view class="submit-btn" @tap="logout">退出登录</view>
		<xh-alert ref="alertRef" @submit="okLogout"></xh-alert>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { userLogout } from '@/common/api/api.js'
	import { useUserStore } from '@/common/stores'
	const userStore = useUserStore()
	const alertRef = ref(null)
	const menuList = ref([{
			title: '修改密码',
			type: 1
		},
		{
			title: '设置支付密码',
			type: 2
		},
		{
			title: '登录人数管理',
			type: 3
		},
		{
			title: '注销账号',
			type: 4
		}
	])
	// 选择功能
	const didSelectItem = (item) => {
		if (item.type == 1) {
			uni.navigateTo({
				url: '/pages/my/setting/update-password/update-password'
			})
		} else if (item.type == 2) {
			if(userStore.user.withdrawPwdStatus == '1'){
				uni.navigateTo({
					url: '/pages/my/setting/set-payment-password/update-payment-password'
				})
			}
			else{
				uni.navigateTo({
					url:'/pages/my/setting/set-payment-password/set-payment-password'
				})
			}
		} else if (item.type == 3) {
			uni.navigateTo({
				url: '/pages/my/setting/login-limit/login-limit'
			})
		} else if (item.type == 4) {
			uni.navigateTo({
				url: '/pages/my/setting/delete-account/delete-account'
			})
		}
	}
	// 退出登录
	const logout = () => {
		alertRef.value.open({content:'是否退出登录？'})
	}
	// 确认退出
	const okLogout = async () => {
		await userLogout()
		uni.$auth.logout()
	}
	onShow(() => {
		if(userStore.user.withdrawPwdStatus == '1'){
			menuList.value[1].title = '修改支付密码'
		}
		else{
			menuList.value[1].title = '设置支付密码'
		}
	})
</script>

<style lang="scss" scoped>
	.setting-layout {
		.setting-list {
			background-color: #ffffff;
			margin-bottom: 50rpx;

			.setting-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 100rpx;
				position: relative;
			}
		}
	}
</style>